<template>
  <div class="home">
    <el-container>
      <el-main>
        <!-- <div class="fy_classes">
          <div class="container col-md-10 col-md-offset-1">
            <div class="fristClasses col-md-4"><router-link :to="{path:'courseDesc?#tab1'}"><img src="../../static/2.jpeg"/></router-link></div>
            <div class="twoClasses col-md-4"><router-link :to="{path:'courseDesc?#tab2'}"><img src="../../static/2.jpeg"/></router-link></div>
            <div class="thirdClasses col-md-4"><router-link :to="{path:'category?.list13'}"><img src="../../static/2.jpeg"/></router-link></div>
          </div>
        </div> -->
        <!-- <ArticleList :list-data="list_data"   @pager="getArticleList"></ArticleList> -->
        <div class="content">
          <h1><p><a href="#">Redis常见使用场景</a></p></h1>
          <p class="el-icon-user-solid">作者 Mr.Yong</p>
          <p class="el-icon-time">发表于  2020-6-20 17：20：20</p><br/>
          <p class="el-icon-s-unfold">分类 Mysql |<span class="el-icon-open">阅读量 171 |</span></p>
          <p class="el-icon-chat-dot-round">评论数 0</p><br/>
          <p>Redis（Remote Dictionary Server )，即远程字典服务，是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。从2010年3月15日起，Redis的开发工作由VMware主持。从2013年5月开始，Redis的开发由Pivotal赞助。</p><br/>
      <el-tag class="a" type="success">数据库</el-tag>
      <el-tag class="a" type="success">Redis</el-tag>
    </div>
    <div class="content">
          <h1><p><a href="/view/1">获取腾讯“邮我”的链接</a></p></h1>
          <p class="el-icon-user-solid">作者 Mr.Yong</p>
          <p class="el-icon-time">发表于  2020-6-20 17：20：20</p><br/>
          <p class="el-icon-s-unfold">分类 技术杂谈 |<span class="el-icon-open">阅读量 62 |</span></p>
          <p class="el-icon-chat-dot-round">评论数 0</p><br/>
          <p>腾讯企业邮箱上线“邮我”功能，一键生成“邮我”按钮，将腾讯企业邮箱中生成的“邮我”代码嵌入到网页或论坛后，其他用户可以方便的给腾讯企业邮箱用户发信。中国邮箱网第一时间做了“邮我”功能测试，感觉还不错，邮我功能在腾讯企业邮箱的【设置】-【账户】中即可启动。</p><br/>
      <el-tag class="a" type="success">邮箱</el-tag>
    </div>
     <div class="content">
          <h1><p><a href="/view/1">获取腾讯“邮我”的链接</a></p></h1>
          <p class="el-icon-user-solid">作者 Mr.Yong</p>
          <p class="el-icon-time">发表于  2020-6-20 17：20：20</p><br/>
          <p class="el-icon-s-unfold">分类 技术杂谈 |<span class="el-icon-open">阅读量 62 |</span></p>
          <p class="el-icon-chat-dot-round">评论数 0</p><br/>
          <p>腾讯企业邮箱上线“邮我”功能，一键生成“邮我”按钮，将腾讯企业邮箱中生成的“邮我”代码嵌入到网页或论坛后，其他用户可以方便的给腾讯企业邮箱用户发信。中国邮箱网第一时间做了“邮我”功能测试，感觉还不错，邮我功能在腾讯企业邮箱的【设置】-【账户】中即可启动。</p><br/>
      <el-tag class="a" type="success">邮箱</el-tag>
    </div>
     <div class="content">
          <h1><p><a href="/view/1">获取腾讯“邮我”的链接</a></p></h1>
          <p class="el-icon-user-solid">作者 Mr.Yong</p>
          <p class="el-icon-time">发表于  2020-6-20 17：20：20</p><br/>
          <p class="el-icon-s-unfold">分类 技术杂谈 |<span class="el-icon-open">阅读量 62 |</span></p>
          <p class="el-icon-chat-dot-round">评论数 0</p><br/>
          <p>腾讯企业邮箱上线“邮我”功能，一键生成“邮我”按钮，将腾讯企业邮箱中生成的“邮我”代码嵌入到网页或论坛后，其他用户可以方便的给腾讯企业邮箱用户发信。中国邮箱网第一时间做了“邮我”功能测试，感觉还不错，邮我功能在腾讯企业邮箱的【设置】-【账户】中即可启动。</p><br/>
      <el-tag class="a" type="success">邮箱</el-tag>
    </div>
     <div class="content">
         <h1><p><a href="/view/1">获取腾讯“邮我”的链接</a></p></h1>
          <p class="el-icon-user-solid">作者 Mr.Yong</p>
          <p class="el-icon-time">发表于  2020-6-20 17：20：20</p><br/>
          <p class="el-icon-s-unfold">分类 技术杂谈 |<span class="el-icon-open">阅读量 62 |</span></p>
          <p class="el-icon-chat-dot-round">评论数 0</p><br/>
          <p>腾讯企业邮箱上线“邮我”功能，一键生成“邮我”按钮，将腾讯企业邮箱中生成的“邮我”代码嵌入到网页或论坛后，其他用户可以方便的给腾讯企业邮箱用户发信。中国邮箱网第一时间做了“邮我”功能测试，感觉还不错，邮我功能在腾讯企业邮箱的【设置】-【账户】中即可启动。</p><br/>
      <el-tag class="a" type="success">邮箱</el-tag>
    </div>
     <div class="content">
          <h1><p><a href="/view/1">获取腾讯“邮我”的链接</a></p></h1>
          <p class="el-icon-user-solid">作者 Mr.Yong</p>
          <p class="el-icon-time">发表于  2020-6-20 17：20：20</p><br/>
          <p class="el-icon-s-unfold">分类 技术杂谈 |<span class="el-icon-open">阅读量 62 |</span></p>
          <p class="el-icon-chat-dot-round">评论数 0</p><br/>
          <p>腾讯企业邮箱上线“邮我”功能，一键生成“邮我”按钮，将腾讯企业邮箱中生成的“邮我”代码嵌入到网页或论坛后，其他用户可以方便的给腾讯企业邮箱用户发信。中国邮箱网第一时间做了“邮我”功能测试，感觉还不错，邮我功能在腾讯企业邮箱的【设置】-【账户】中即可启动。</p><br/>
      <el-tag class="a" type="success">邮箱</el-tag>
    </div>
        <!-- <ArticleScrollPage></ArticleScrollPage> -->
      </el-main>
      <el-aside class="home-aside" width="35%">
        <Me></Me>
        <Tags :tags="tags"></Tags>
        <CardArticle cardHeader='最热文章' icon='hot' :articles="hotArtcile"></CardArticle>
        <Archive cardHeader='文章归档' :archives="archive"></Archive>
        <CardArticle cardHeader='最新文章' icon='article' :articles="newArtcile"></CardArticle>
        <Friend :links='links'></Friend>
      </el-aside> 
    </el-container>
  </div>
</template>

<script>
import ArticleScrollPage from '@/components/ArticleScrollPage'
import Tags from "@/components/card/Tags";
import Friend from "@/components/card/Friend";
import Me from "@/components/card/Me";
import Archive from "@/components/card/Archive";
import CardArticle from "@/components/card/CardArticle";

import {getHotArtices, getNewArtices, getArchive} from '@/api/article';
import {getTags} from '@/api/tag';
import {getLinkTop} from '@/api/link';

let _this = this;
export default {
  name: "Home",
  components: {
    Tags,
    Friend,
    Me,
    Archive,
    CardArticle,
    ArticleScrollPage
  },
  data() {
    return {
        hotArtcile:[],
        newArtcile:[],
        archive:[],
        tags:[],
        links:[],
        page:1,
        hot_music:[]

    };
  },
  mounted(){

  },
  created() {
    _this = this;
    this.getHotArtices()
    this.getNewArtices()
    this.getTags()
    this.getArchive()
    this.getLink()

  },
  methods:{
    getHotArtices(){
      var param = {}
      getHotArtices(param).then(res => {
          _this.hotArtcile = res.data
      }) 
    },
    getNewArtices(){
      var param = {}
      getNewArtices(param).then(res => {
          _this.newArtcile = res.data
      }) 
    },
    getArchive(){
      var param = {}
      getArchive(param).then(res => {
          _this.archive = res.data
      }) 
    },
    getTags(){
      var param = {
        limit:20
      }
      getTags(param).then(res => {
          _this.tags = res.data.list
      }) 
    },
    getLink(){
      var param = {
        limit:20
      }
      getLinkTop(param).then(res => {
          _this.links = res.data
      }) 
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.home
    border 1px solid whitesmoke
    display flex
    align-items center
    justify-content center
    width 65%
    .el-main
      width 65%
      //border 1px solid #cccccc
    .el-aside
      width 35%
      //border 1px solid #cccccc
      margin-top 39px
      padding 0px 10px
      .el-card:not(:first-child)
        margin-top 20px
.content
        width 100%
        padding-bottom 10px
        border 3px solid whitesmoke
        margin-top 30px
p
        margin-left 20px
        margin-top 10px
.a
        margin-top -25px
        margin-left 20px
</style>